import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
import { useNavigate } from 'react-router-dom';

function MemoListItem({memo, handleDeleteMemo}) {
  const navigate = useNavigate();

  // 处理内容文本，超过20字符显示省略号
  const truncateContent = (content) => {
    return content.length > 20 ? content.slice(0, 20) + '...' : content;
  };

  // 处理点击事件，导航到备忘录详情页
  const handleClick = () => {
    navigate(`/memo/${memo.id}`);
  };

  return (
    <>
      <ListItem 
        alignItems="flex-start"
        onClick={handleClick}
        sx={{ cursor: 'pointer' }}
        secondaryAction={
          <IconButton 
            edge="end" 
            aria-label="delete"
            onClick={(event) => {
              event.stopPropagation();
              handleDeleteMemo(memo.id);
            }}
          >
            <DeleteIcon />
          </IconButton>
        }
      >
        <ListItemText
          primary={memo.title}
          secondary={
            <>
              {truncateContent(memo.content)}
            </>
          }
        />
      </ListItem>
      <Divider component="li" />
    </>
  );
}

export default MemoListItem;